<template>
  <div class="market_cardactivity_card_detail">
    <div class="detail-table">
      <Row>
        <Col span="24" class="detail-table__col detail-table__title">
          集卡活动详情
        </Col>
      </Row>
      <Row>
        <Col span="12" class="detail-table__col">
          <span class="detail-table__label--5">门店名称：</span>
          <span class="detail-table__content--5">{{ formInfo.shopName }}</span>
        </Col>
        <Col span="12" class="detail-table__col">
          <span class="detail-table__label--5">活动名称：</span>
          <span class="detail-table__content--5">{{ formInfo.activityName }}</span>
        </Col>
      </Row>
      <Row>
        <Col span="12" class="detail-table__col">
          <span class="detail-table__label--6">活动成本率：</span>
          <span class="detail-table__content--6">{{ formInfo.costRate }}%</span>
        </Col>
        <Col span="12" class="detail-table__col">
          <span class="detail-table__label--5">门店币值：</span>
          <span class="detail-table__content--5">{{ formInfo.shopCoinQty }}</span>
        </Col>
      </Row>
      <div v-for="(item, index) in awardList" :key="index + '-only'">
        <Row class="no-bottom-border">
          <Col span="12" class="detail-table__col no-right-border">
            <span class="detail-table__label--5">奖品名称：</span>
            <span class="detail-table__content--5">{{ item.awardName }}</span>
          </Col>
          <Col span="12" class="detail-table__col">
            <span class="detail-table__label--5">奖品单价：</span>
            <span class="detail-table__content--5">{{ item.awardPrice }}</span>
          </Col>
        </Row>
        <Row class="no-bottom-border">
          <Col span="12" class="detail-table__col no-right-border">
            <span class="detail-table__label--7">奖品数量上限：</span>
            <span class="detail-table__content--7">{{ item.awardTotalQty }}</span>
          </Col>
          <Col span="12" class="detail-table__col">
            <span class="detail-table__label--5">碎片数量：</span>
            <span class="detail-table__content--5">{{ item.fragmentQty }}</span>
          </Col>
        </Row>
        <Row>
          <Col span="12" class="detail-table__col no-right-border">
            <span class="detail-table__label--7">核心碎片数量：</span>
            <span class="detail-table__content--7">{{ item.awardTotalQty }}</span>
          </Col>
          <Col span="12" class="detail-table__col">
            <span class="detail-table__label--7">单组奖品成本：</span>
            <span class="detail-table__content--7">{{ item.costPrice }}</span>
          </Col>
          <Col span="24" class="detail-table__col">
            <Button type="primary"
                @click="lookFragment(item)"
                >查看碎片</Button>
          </Col>
        </Row>
      </div>
      <Row>
        <Col span="12" class="detail-table__col">
          <span class="detail-table__label--6">活动总成本：</span>
          <span class="detail-table__content--6">{{ formInfo.costQty }}</span>
        </Col>
        <Col span="12" class="detail-table__col">
          <span class="detail-table__label--4">吸币量：</span>
          <span class="detail-table__content--4">{{ formInfo.suctionCoinQty }}</span>
        </Col>
      </Row>
      <Row>
        <Col span="12" class="detail-table__col">
          <span class="detail-table__label--6">卡片总张数：</span>
          <span class="detail-table__content--6">{{ formInfo.cardQty }}</span>
        </Col>
        <Col span="12" class="detail-table__col">
          <span class="detail-table__label--6">赠币总数量：</span>
          <span class="detail-table__content--6">{{ formInfo.coinQty }}</span>
        </Col>
      </Row>
      <Row>
        <Col span="12" class="detail-table__col">
          <span class="detail-table__label--7">卡片盒数/盒：</span>
          <span class="detail-table__content--7">{{ formInfo.boxQty }}</span>
        </Col>
        <Col span="12" class="detail-table__col">
          <span class="detail-table__label--3">状态：</span>
          <span class="detail-table__content--3">{{ getEnumsName(formInfo.activityStatus, allStatus) }}</span>
        </Col>
      </Row>
      <Row class="no-bottom-border">
        <Col span="8" class="detail-table__col no-right-border">赠币名称</Col>
        <Col span="8" class="detail-table__col no-right-border">面额</Col>
        <Col span="8" class="detail-table__col">数量</Col>
      </Row>
      <Row v-for="(item, index) in tables" :key="index" :class="{ 'no-bottom-border': tables.length !== index + 1 }">
        <Col span="8" class="detail-table__col no-right-border">{{ item.couponName }}</Col>
        <Col span="8" class="detail-table__col no-right-border">{{ item.couponDenomination }}</Col>
        <Col span="8" class="detail-table__col">{{ item.couponNum }}</Col>
      </Row>
      <Row>
        <Col span="12" class="detail-table__col">
          <span class="detail-table__label--4">创建人：</span>
          <span class="detail-table__content--4">{{ formInfo.creatorName }}</span>
        </Col>
        <Col span="12" class="detail-table__col">
          <span class="detail-table__label--5">创建时间：</span>
          <span class="detail-table__content--5">{{ formInfo.createAt }}</span>
        </Col>
      </Row>
      <Row>
        <Col span="12" class="detail-table__col">
          <span class="detail-table__label--4">修改人：</span>
          <span class="detail-table__content--4">{{ formInfo.updaterName }}</span>
        </Col>
        <Col span="12" class="detail-table__col">
          <span class="detail-table__label--5">修改时间：</span>
          <span class="detail-table__content--5">{{ formInfo.updatedAt }}</span>
        </Col>
      </Row>
    </div>
    <fragment-card :show="drawShow" :fragments="fragments" :mode="mode" @on-close="drawShow = false" :important="importantFragment"></fragment-card>
  </div>
</template>

<script>
import enumsMixin from './enums'
import { mapState } from 'vuex'
import { cardDetail, fragmentCard } from '@/api/market/cardactivity/card.js'
import FragmentCard from './fragmentCard.vue'
export default {
  name: 'market_cardactivity_card_detail',
  mixins: [enumsMixin],
  components: {
    FragmentCard
  },
  data () {
    return {
      formInfo: {},
      awardList: [],
      tables: [],
      drawShow: false,
      mode: 4,
      fragments: [],
      importantFragment: ''
    }
  },
  computed: {
    ...mapState({
      merchantId: state => state.user.merchantId
    })
  },
  mounted () {
    this.getDetail()
  },
  methods: {
    getDetail () {
      const query = this.$route.query
      cardDetail({
        merchantId: this.merchantId,
        shopId: query.shopId,
        activityCardId: query.id
      }).then(res => {
        const result = res.data || {}
        if (result.status === 200) {
          const form = result.data || {}
          this.formInfo = form
          this.awardList = form.awardList || []
          this.tables = (form.couponList || []).sort((item1, item2) => item1.couponDenomination - item2.couponDenomination)
        } else {
          this.$Message.error(`${result.error}`)
        }
      }).catch(err => {
        this.$Message.error(`${err}`)
      })
    },
    lookFragment (item) {
      fragmentCard({
        merchantId: this.merchantId,
        activityAwardId: item.activityAwardId,
        type: 1
      }).then(res => {
        const result = res.data || {}
        if (result.status === 200) {
          this.drawShow = true
          this.mode = item.fragmentQty
          this.fragments = result.data || []
          const importantFragments = this.fragments.filter(item => item.fragmentType === 1)
          this.importantFragment = importantFragments[0] ? importantFragments[0].fragmentNo : ''
        } else {
          this.$Message.error(`${result.error}`)
        }
      }).catch(err => {
        this.$Message.error(`${err}`)
      })
    }
  }
}
</script>

<style lang="less">
@import '~@/assets/stylus/detail-table.less';
.market_cardactivity_card_detail {
  padding: 40px 80px
}
</style>
